
function MapItemStyle(borderWeight, borderColor, fillColor, filter, fontColor) {
    this.borderWeight = borderWeight;
    this.borderColor = borderColor;
    this.fillColor = fillColor;
    this.filter = filter;
    this.fontColor = fontColor;
}

var m_Styles = new Array();
var colorKeys = new Array("00", "80", "ff");
for (var i = 0; i < colorKeys.length; i++) {
    for (var j = 0; j < colorKeys.length; j++) {
        for (var k = 0; k < colorKeys.length; k++) {
            var color = "#" + colorKeys[i] + colorKeys[j] + colorKeys[k];
            m_Styles[m_Styles.length] = new MapItemStyle("1px", color, color, "Alpha(Opacity=30)", "#ffffff");
            m_Styles[m_Styles.length] = new MapItemStyle("2px", color, color, "Alpha(Opacity=50)", "#ffffff");
        }        
    }
}

function initStylePannel(style_panel, selectedValue) {
	while (style_panel.firstChild != null)
		style_panel.removeChild(style_panel.firstChild);

	var table = document.createElement("table");
	table.border = "0";
	table.cellPadding = "0";
	table.cellSpacing = "4px";
	style_panel.appendChild(table);
	style_panel._styles = new Array();

	var row;
	for (var i = 0; i < m_Styles.length; i += 2) {
		var style1 = m_Styles[i];
		var style2 = m_Styles[i + 1];

		if (i % 20 == 0) {
			row = table.insertRow();
		}
		var cell = row.insertCell();
		var div = document.createElement("div");
		div.style.backgroundColor = style1.fillColor;
		div.style.color = style1.fontColor;
		div.style.width = "30px";
		div.style.border = "2px solid transparent";

		div._s1 = style1;
		div._s2 = style2;
		div._panel = style_panel;
		style_panel._styles[style_panel._styles.length] = div;

		div.onclick = function() {
			this._panel._s1 = this._s1;
			this._panel._s2 = this._s2;
			for (var j = 0; j < this._panel._styles.length; j++) {
				style_panel._styles[j].style.border = "2px solid transparent";
			}
			this.style.border = "4px solid " + this._s1.fillColor;
		}

		if (selectedValue == style1.fillColor) {
			div.style.border = "4px solid red";
			style_panel._s1 = style1;
			style_panel._s2 = style2;
		}   

		cell.appendChild(div);
	}
}